<template>
  <div class="mask" v-if="showCharts && calculations.total>0" @click="handleCartShowChange"/>
  <div class="cart">
    <div class="product" v-if="showCharts && calculations.total>0">
      <div class="product_header">
        <div class="product_header_all" @click="()=>setCartItemChecked(shopId)">
          <span
            class="product_header_icon iconfont"
            v-html="calculations.allChecked ? '&#xe652;': '&#xe667;'"
          >
          </span>
          全选
        </div>
        <div class="product_header_clear">
          <span @click="clearProductCarts(shopId)" class="product_header_clear_btn">清空购物车</span>
        </div>
      </div>
      <div v-for="item in productList"
           :key="item._id"
           class="product_item"
      >
        <div class="product_item_checked iconfont" v-html="item.check?'&#xe652;':'&#xe667;'"
             @click.stop="()=>changeCartProductItemChecked(shopId,item._id)"
        />
        <img class="product_item_img" :src="item.imgUrl">
        <div class="product_item_detail">
          <h4 class="product_item_title">{{ item.name }}</h4>
          <p class="product_item_sales">月售{{ item.sales }}件</p>
          <p class="product_item_price">
            <span class="product_item_yen">&yen;</span>{{ item.price }}
            <span class="product_item_origin">&yen; {{ item.oldPrice }}</span>
          </p>
        </div>
        <div class="product_number">
          <span class="product_number_minus" @click="()=>{changeCartItemInfo(shopId,item._id,item,-1)}">-</span>
          {{ item.count || 0 }}
          <span class="product_number_plus" @click="()=>{changeCartItemInfo(shopId,item._id,item,1)}">+</span>
        </div>
      </div>
    </div>

    <div class="check">
      <div class="check_icon">
        <img
          src="http://www.dell-lee.com/imgs/vue3/basket.png"
          class="check_icon_img"
          @click="handleCartShowChange"
        />
        <div class="check_icon_tag">{{ calculations.total }}</div>
      </div>
      <div class="check_info">
        总计：<span class="check_info_price">&yen;{{ calculations.price }}</span>
      </div>
      <div class="check_btn" v-show="calculations.total>0">
        <router-link :to="{path:`/orderConfirmation/${shopId}`}">
          去结算
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { useCommonCartEffect } from '@/effect/cartEffects'

/* 获取购物车逻辑 */
const useCarEffect = (shopId) => {
  const { productList, calculations, changeCartItemInfo } = useCommonCartEffect(shopId)
  const store = useStore()
  const changeCartProductItemChecked = (shopId, productId) => {
    store.commit('changeCartItemChecked', {
      shopId,
      productId
    })
  }
  const clearProductCarts = (shopId) => {
    store.commit('clearProductCarts', {
      shopId
    })
  }
  const setCartItemChecked = (shopId) => {
    store.commit('setCartItemChecked', {
      shopId
    })
  }
  return {
    calculations,
    productList,
    setCartItemChecked,
    clearProductCarts,
    changeCartItemInfo,
    changeCartProductItemChecked
  }
}
const toggleCartEffect = () => {
  const showCharts = ref(false)
  const handleCartShowChange = () => {
    showCharts.value = !showCharts.value
  }
  return {
    showCharts,
    handleCartShowChange
  }
}
export default {
  name: 'Cart',
  setup () {
    const route = useRoute()
    const shopId = route.params.id
    const {
      calculations, productList, setCartItemChecked,
      changeCartItemInfo, clearProductCarts, changeCartProductItemChecked
    } = useCarEffect(shopId)
    const { showCharts, handleCartShowChange } = toggleCartEffect()
    return {
      calculations,
      shopId,
      productList,
      showCharts,
      setCartItemChecked,
      clearProductCarts,
      changeCartItemInfo,
      handleCartShowChange,
      changeCartProductItemChecked
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/viriables";
@import "../../style/mixins";

.mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgb(0, 0, 0, .5);
  z-index: 1;
}

.cart {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: $bgColor;
}

.check {
  display: flex;
  box-sizing: border-box;
  height: .5rem;
  border-top: .01rem solid $content-bgColor;
  line-height: .5rem;

  &_icon {
    display: inline-block;
    position: relative;
    width: .84rem;

    &_img {
      display: block;
      margin: .12rem auto;
      width: .28rem;
      height: .26rem;
    }

    &_tag {
      position: absolute;
      left: .46rem;
      top: .04rem;
      padding: 0.04rem;
      min-width: .2rem;
      height: .2rem;
      line-height: .2rem;
      background-color: $hightlight-fontColor;
      border-radius: .1rem;
      font-size: .12rem;
      text-align: center;
      color: $bgColor;
      transform: scale(.5);
      transform-origin: left center;
    }
  }

  &_info {
    flex: 1;
    color: $content-fontcolor;
    font-size: .12rem;

    &_price {
      color: $hightlight-fontColor;
      font-size: .18rem;
    }
  }

  &_btn {
    width: .98rem;
    line-height: .5rem;
    background-color: #4FB0F9;
    font-size: .14rem;
    text-align: center;

    a {
      color: $bgColor;
      text-decoration: none;
    }
  }
}

.product {
  background: $bgColor;
  overflow-y: scroll;
  flex: 1;

  &_header {
    line-height: .52rem;
    border-bottom: 1px solid #F1F1F1;
    display: flex;
    font-size: .14rem;
    color: $content-fontcolor;

    &_all {
      width: .64rem;
      margin-left: .18rem;
    }

    &_icon {
      display: inline-block;
      margin-right: .1rem;
      vertical-align: top;
      color: #0091FF;
      font-size: .2rem;
    }

    &_clear {
      margin-right: .16rem;
      flex: 1;
      text-align: right;

      &_btn {
        display: inline-block;
      }
    }
  }

  &_item {
    position: relative;
    display: flex;
    padding: .12rem 0;
    margin: 0 .16rem;
    border-bottom: .01rem;
    solid: $content-bgColor;

    &_checked {
      line-height: .5rem;
      color: #0091FF;
      font-size: .2rem;
    }

    &_detail {
      overflow: hidden;
    }

    &_img {
      width: .68rem;
      height: .68rem;
      margin-right: .16rem;
    }

    &_title {
      margin: 0;
      line-height: .2rem;
      font-size: .14rem;
      color: $content-fontcolor;
      @include ellipsis;
    }

    &_price {
      margin: .06rem 0 0 0;
      line-height: .2rem;
      font-size: .14rem;
      color: $hightlight-fontColor;
    }

    &_yen {
      font-size: .12rem;
    }

    &_origin {
      margin-left: .2rem;
      line-height: .2rem;
      font-size: .12rem;
      color: #999;
      text-decoration: line-through;
    }

    .product_number {
      position: absolute;
      right: 0;
      bottom: .26rem;
      line-height: .18rem;

      &_minus,
      &_plus {
        display: inline-block;
        width: .2rem;
        height: .2rem;
        line-height: .16rem;
        border-radius: 50%;
        font-size: .2rem;
        text-align: center;
      }

      &_minus {
        border: .0rem solid #666;
        color: #666;
        margin-right: .1rem;
      }

      &_plus {
        background: #0091FF;
        color: $bgColor;
        margin-left: .1rem;
      }
    }
  }
}

</style>
